<template>
  <div class="app-container">

    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="form.goods_name" placeholder="商品名称" disabled/>
        <span v-if="!form.is_sku">当前库存：{{ form.store_count }}</span>
      </el-form-item>
      <el-form-item label="类型" prop="type" required>
        <el-select v-model="form.type" placeholder="请选择库存类型" clearable>
          <el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="规格" prop="spec_id" v-if="form.is_sku" required>
        <el-select v-model="form.spec_id" placeholder="请选择规格" clearable>
          <el-option v-for="(item,index) in form.sku_list" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="数量" prop="change_num" required>
        <el-input v-model="form.change_num" placeholder="数量" min="0" max="99999999"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark" required>
        <el-input v-model="form.remark" type="textarea" placeholder="备注"/>
      </el-form-item>

      <el-form-item class="action-btn">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/goods_stock_log'

export default {
  components: {},
  data() {
    return {
      type: '',
      types: [
        { name: '入库', value: 1 },
        { name: '出库', value: 2 }
      ],
      category_list: [],
      brand_list: [],
      form: {
        is_sku: false,
        sku_list: [],
        goods_id: 0,
        goods_name: '',
        spec_id: '',
        type: 1,
        change_num: '',
        remark: ''

      },
      rules: {
        type: [
          { required: true, message: '请选择库存类型', trigger: 'change' }
        ],
        spec_id: [
          { required: true, message: '请选择规格', trigger: 'change' }
        ],
        change_num: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    if (this.$route.query.hasOwnProperty('type')) {
      this.type = this.$route.query.type
    }

    if (this.$route.query.hasOwnProperty('goods_id')) {
      this.getData(this.$route.query.goods_id)
    }
  },

  methods: {
    getData(goods_id) {
      api.query_goods({ goods_id: goods_id, type: this.type }).then((res) => {
        if (res.code === 0) {
          this.form = Object.assign(this.form, res.data)
        }
      })
    },

    onSubmit() {
      const that = this
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.$confirm('确定提交吗？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = that.$loading({
            lock: true,
            text: '正在保存',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          api.create(this.form).then(res => {
            that.$message({
              type: 'success',
              message: res.msg
            })
          }).finally(() => {
            loading.close()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      })

    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

.action-btn {
  margin-top: 30px;
}
</style>

